<template>
  <view class="container">
    <view class="register-box">
      <view class="logo">
        <image src="/static/images/logo.png" mode="aspectFit"></image>
        <text class="app-name">水滴记 - 注册</text>
      </view>
      
      <view class="form-box">
        <u-form :model="form" ref="uForm" labelPosition="top">
          <u-form-item label="用户名" required>
            <u-input 
              v-model="form.username" 
              placeholder="请输入用户名" 
              maxlength="20"
            ></u-input>
          </u-form-item>
          
          <u-form-item label="手机号" required>
            <u-input 
              v-model="form.phone" 
              placeholder="请输入手机号" 
              maxlength="11"
              type="number"
            ></u-input>
          </u-form-item>
          
          <u-form-item label="密码" required>
            <u-input 
              v-model="form.password" 
              placeholder="请输入密码（不少于8位）" 
              type="password"
            ></u-input>
          </u-form-item>
          
          <u-form-item label="确认密码" required>
            <u-input 
              v-model="form.confirmPassword" 
              placeholder="请再次输入密码" 
              type="password"
            ></u-input>
          </u-form-item>
        </u-form>
        
        <view class="password-tips">
          <text>密码要求：</text>
          <text>1. 不少于8位</text>
          <text>2. 建议包含字母、数字和特殊字符</text>
        </view>
        
        <view class="btn-box">
          <u-button type="primary" text="注册" @click="handleRegister" :loading="loading"></u-button>
          <u-button type="info" text="返回登录" plain @click="goLogin"></u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { register } from '@/api/user'

export default {
  data() {
    return {
      form: {
        username: '',
        phone: '',
        password: '',
        confirmPassword: ''
      },
      loading: false
    }
  },
  methods: {
    // 验证密码强度
    validatePassword(password) {
      // 验证密码长度
      if (password.length < 8) {
        return {
          valid: false,
          message: '密码长度不能少于8位'
        };
      }
      
      // 验证密码复杂度（可选）
      const hasLetter = /[a-zA-Z]/.test(password);
      const hasDigit = /\d/.test(password);
      const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(password);
      
      if (!(hasLetter && hasDigit)) {
        return {
          valid: false,
          message: '密码应包含字母和数字'
        };
      }
      
      return {
        valid: true,
        message: ''
      };
    },
    
    // 验证手机号格式
    validatePhone(phone) {
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!phoneRegex.test(phone)) {
        return {
          valid: false,
          message: '请输入正确的手机号码'
        };
      }
      return {
        valid: true,
        message: ''
      };
    },
    
    // 处理注册
    handleRegister() {
      console.log('点击注册按钮');
      
      // 用户名验证
      if (!this.form.username) {
        uni.showToast({
          title: '请输入用户名',
          icon: 'none'
        });
        return;
      }
      
      if (this.form.username.length < 3) {
        uni.showToast({
          title: '用户名长度不能少于3位',
          icon: 'none'
        });
        return;
      }
      
      // 手机号验证
      if (!this.form.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        });
        return;
      }
      
      const phoneValidation = this.validatePhone(this.form.phone);
      if (!phoneValidation.valid) {
        uni.showToast({
          title: phoneValidation.message,
          icon: 'none'
        });
        return;
      }
      
      // 密码验证
      if (!this.form.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        });
        return;
      }
      
      const passwordValidation = this.validatePassword(this.form.password);
      if (!passwordValidation.valid) {
        uni.showToast({
          title: passwordValidation.message,
          icon: 'none'
        });
        return;
      }
      
      // 确认密码验证
      if (!this.form.confirmPassword) {
        uni.showToast({
          title: '请确认密码',
          icon: 'none'
        });
        return;
      }
      
      if (this.form.password !== this.form.confirmPassword) {
        uni.showToast({
          title: '两次输入的密码不一致',
          icon: 'none'
        });
        return;
      }
      
      this.loading = true;
      
      // 构建注册请求参数
      const registerData = {
        username: this.form.username,
        phone: this.form.phone,
        password: this.form.password
      };
      
      console.log('开始注册请求，参数:', registerData);
      
      // 使用API函数发送请求
      register(registerData)
        .then(res => {
          console.log('注册请求响应:', res);
          
          uni.showToast({
            title: '注册成功',
            icon: 'success'
          });
          
          // 注册成功后跳转到登录页面
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        })
        .catch(err => {
          console.error('注册请求失败:', err);
          uni.showToast({
            title: err.message || '注册失败，请稍后再试',
            icon: 'none'
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    // 返回登录页面
    goLogin() {
      uni.navigateBack();
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 40rpx;
}

.register-box {
  padding-top: 60rpx;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;
  
  image {
    width: 160rpx;
    height: 160rpx;
  }
  
  .app-name {
    margin-top: 20rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #2979ff;
  }
}

.form-box {
  padding: 20rpx;
}

.password-tips {
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  
  text {
    display: block;
    font-size: 24rpx;
    color: #909399;
    line-height: 1.8;
  }
}

.btn-box {
  margin-top: 40rpx;
  
  .u-button {
    margin-bottom: 30rpx;
  }
}
</style> 